<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">


        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>


        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>

        <div id="hyperlinks" class="tutorial">

            <h2>Custom elements with hyperlinks</h2>

            <p>It is possible to define <a href="custom-elements.html">custom JointJS elements</a> with hyperlinks
                pointing to external sites - by including the <code>&lt;a&gt;</code>
                <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a" target="_blank">SVG element</a>
                in the <a href="custom-elements.html#markup">markup</a> of a custom element.
                The navigation path is then specified in individual elements' attributes of the custom type.</p>

            <p>The two most important
                <a href="https://www.w3schools.com/xml/xml_xlink.asp" target="_blank">XLink</a> attributes in this
                context are the following:</p>

            <ul>
                <li><code>xlink:href</code> - set the target resource URL.</li>
                <li><code>xlink:show</code> - how should the linked content be presented?
                    Possible values are <code>'replace'</code> (show in current window; default) and <code>'new'</code>
                    (show in new window).</li>
            </ul>

            <div id="paper-hyperlinks"></div>

            <pre data-src="js/hyperlinks.js"></pre>

            <p>JointJS source code: <a href="js/hyperlinks.js" target="_blank">hyperlinks.js</a></p>

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>

        <script src="js/hyperlinks.js"></script>
    </body>
</html>
